<template>
  <div class="demo">
    <div class="demo-title">简单列表</div>
    <div class="demo-content">
      <h3 :style="{ margin: '16px 0' }">Small Size</h3>
      <List size="small" bordered :data-source="data">
        <template #renderItem="{ item }">
          <List.Item>{{ item }}</List.Item>
        </template>
        <template #header>
          <div>Header</div>
        </template>
        <template #footer>
          <div>Footer</div>
        </template>
      </List>
      <h3 :style="{ marginBottom: '16px' }">Default Size</h3>
      <List bordered :data-source="data">
        <template #renderItem="{ item }">
          <List.Item>{{ item }}</List.Item>
        </template>
        <template #header>
          <div>Header</div>
        </template>
        <template #footer>
          <div>Footer</div>
        </template>
      </List>
      <h3 :style="{ margin: '16px 0' }">Large Size</h3>
      <List size="large" bordered :data-source="data">
        <template #renderItem="{ item }">
          <List.Item>{{ item }}</List.Item>
        </template>
        <template #header>
          <div>Header</div>
        </template>
        <template #footer>
          <div>Footer</div>
        </template>
      </List>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import List from '@sscd/list';
  const data: string[] = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
  ];
</script>
